<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>lightBox</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
</head>
    <body>
    <h1>1组图片</h1>
        <div>
            <!--//data-role(这个元素要启用lightbox) 和class="js-lightbox"设置一个即可-->
            <!--//data-resource(原图的地址)data-group属于哪一个组别data-id图片的唯一标识data-caption图片的描述-->
            <img class="js-lightbox" data-role="lightbox" data-source="./img/侧耳倾听1-1.jpeg" data-group="grounp-1" data-id="1-1" data-caption="侧耳倾听" src="./img/侧耳倾听1-1.jpeg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/龙猫1-2.jpeg" data-group="grounp-1" data-id="1-2" data-caption="龙猫" src="./img/龙猫1-2.jpeg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/魔女宅急便1-3.jpg" data-group="grounp-1" data-id="1-3" data-caption="魔女宅急便" src="./img/魔女宅急便1-3.jpg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/千与千寻1-4.jpg" data-group="grounp-1" data-id="1-4" data-caption="千与千寻" src="./img/千与千寻1-4.jpg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/天空之城1-5.jpg" data-group="grounp-1" data-id="1-5" data-caption="天空之城" src="./img/天空之城1-5.jpg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/悬崖上的金鱼姬1-6.jpeg" data-group="grounp-1" data-id="1-6" data-caption="悬崖上的金鱼姬" src="./img/悬崖上的金鱼姬1-6.jpeg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/幽灵公主1-7.jpeg" data-group="grounp-1" data-id="1-7" data-caption="幽灵公主" src="./img/幽灵公主1-7.jpeg" width="100" height="100">
            <img class="js-lightbox" data-role="lightbox" data-source="./img/宫崎骏1-8.jpg" data-group="grounp-1" data-id="1-8" data-caption="宫崎骏" src="./img/宫崎骏1-8.jpg" width="100" height="100">
        </div>
    <h1>2组图片</h1>
    <div>
        <img class="js-lightbox" data-role="lightbox" data-source="./img/龙猫2-1.jpg" data-group="group-2" data-id="2-1" data-caption="龙猫和小伙伴" src="./img/龙猫2-1.jpg" width="100" height="100">
    </div>

    <!--&lt;!&ndash;遮罩层&ndash;&gt;-->
    <!--<div id="lightbox-mask"></div>-->
    <!--&lt;!&ndash;弹出层&ndash;&gt;-->
    <!--<div id="lightbox-popup">-->
        <!--<div class="lightbox-pic-view">-->
            <!--<span lightbox-btn lightbox-prev></span>-->
            <!--<img class="lightbox-image" width="100%" src="./img/龙猫.jpeg">-->
            <!--<span lightbox-btn lightbox-next></span>-->
        <!--</div>-->
        <!--<div class="lightbox-pic-caption">-->
            <!--<div class="lightbox-pic-area">-->
                <!--<p class="lightbox-pic-desc">图片标题:</p>-->
                <!--<span class="lightbox-of-index">第1页/共9页</span>-->
            <!--</div>-->
            <!--<button class="lightbox-close-btn"></button>-->
        <!--</div>-->
    </div>
    </body>
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/index.js"></script>
<script>
    $(function(){
        var lightbox = new LightBox({
            speed:600,
            maxWidth:900,
            maxHeight:600
        });
    });
</script>

<!--[if IE6]>
<scriptsrcscriptsrc="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg,.box,.img');
</script>
<![endif]-->
</html>